<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夏日海岛旅行记 - 相册详情</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #eef0ff;
            --secondary: #6c757d;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #23c16b;
            --danger: #e53e3e;
            --border: #e9ecef;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
            --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f7fa;
            color: var(--dark);
            padding-top: 20px;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .page-header {
            margin-bottom: 2rem;
        }
        
        .back-link {
            color: var(--secondary);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            margin-bottom: 1rem;
            transition: color 0.2s;
        }
        
        .back-link:hover {
            color: var(--primary);
        }
        
        .back-link i {
            margin-right: 8px;
        }
        
        .album-header {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .album-title {
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--dark);
        }
        
        .album-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            margin-bottom: 1.5rem;
            color: var(--secondary);
            font-size: 0.9rem;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
        }
        
        .meta-item i {
            margin-right: 8px;
            color: var(--primary);
        }
        
        .album-description {
            color: var(--dark);
            line-height: 1.6;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }
        
        .album-author {
            display: flex;
            align-items: center;
        }
        
        .author-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 12px;
        }
        
        .author-info {
            flex-grow: 1;
        }
        
        .author-name {
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .author-joined {
            font-size: 0.8rem;
            color: var(--secondary);
        }
        
        .follow-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 6px 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .follow-btn:hover {
            background-color: #3a56d4;
        }
        
        .follow-btn.following {
            background-color: white;
            color: var(--primary);
            border: 1px solid var(--primary);
        }
        
        .album-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }
        
        .primary-action {
            background-color: var(--primary);
            color: white;
        }
        
        .primary-action:hover {
            background-color: #3a56d4;
        }
        
        .secondary-action {
            background-color: white;
            color: var(--secondary);
            border: 1px solid var(--border);
        }
        
        .secondary-action:hover {
            background-color: var(--light);
            color: var(--dark);
        }
        
        /* 图片网格样式 */
        .photos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .photo-item {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
            cursor: pointer;
            position: relative;
            aspect-ratio: 1;
        }
        
        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
        
        .photo-item:hover img {
            transform: scale(1.05);
        }
        
        .photo-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: white;
            padding: 0.75rem;
            font-size: 0.85rem;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .photo-item:hover .photo-caption {
            opacity: 1;
        }
        
        /* 全屏图片查看器 */
        .fullscreen-viewer {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 1050;
            display: none;
            justify-content: center;
            align-items: center;
            padding: 2rem;
        }
        
        .fullscreen-viewer.active {
            display: flex;
        }
        
        .viewer-content {
            position: relative;
            max-width: 100%;
            max-height: 90vh;
        }
        
        .fullscreen-image {
            max-width: 100%;
            max-height: 90vh;
            object-fit: contain;
        }
        
        .viewer-caption {
            position: absolute;
            bottom: -40px;
            left: 0;
            right: 0;
            color: white;
            text-align: center;
            font-size: 1rem;
        }
        
        .viewer-close {
            position: absolute;
            top: -40px;
            right: 0;
            color: white;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background-color 0.2s;
        }
        
        .viewer-close:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .viewer-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            pointer-events: none;
        }
        
        .viewer-btn {
            color: white;
            background: rgba(0, 0, 0, 0.5);
            border: none;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            cursor: pointer;
            transition: background-color 0.2s;
            pointer-events: auto;
        }
        
        .viewer-btn:hover {
            background: rgba(0, 0, 0, 0.7);
        }
        
        /* 评论区样式 */
        .comments-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .section-title {
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 8px;
            color: var(--primary);
        }
        
        .comment-form {
            margin-bottom: 2rem;
        }
        
        .form-group {
            display: flex;
            gap: 1rem;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .comment-input {
            flex-grow: 1;
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 10px 16px;
            font-size: 0.95rem;
            resize: none;
            height: 40px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        
        .comment-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
            outline: none;
        }
        
        .submit-comment {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 0 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
            flex-shrink: 0;
        }
        
        .submit-comment:hover {
            background-color: #3a56d4;
        }
        
        .comments-list {
            margin-bottom: 2rem;
        }
        
        .comment-item {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .comment-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .comment-content {
            flex-grow: 1;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }
        
        .comment-author {
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .comment-time {
            font-size: 0.8rem;
            color: var(--secondary);
        }
        
        .comment-text {
            margin-bottom: 0.75rem;
            line-height: 1.5;
        }
        
        .comment-actions {
            display: flex;
            gap: 1.5rem;
            font-size: 0.85rem;
        }
        
        .comment-action {
            color: var(--secondary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: color 0.2s;
        }
        
        .comment-action:hover {
            color: var(--primary);
        }
        
        .comment-action.liked {
            color: var(--primary);
        }
        
        /* 回复样式 */
        .replies-list {
            margin-top: 1rem;
            margin-left: 2rem;
        }
        
        .reply-item {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }
        
        .reply-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .reply-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .reply-form {
            display: flex;
            gap: 0.75rem;
            margin-top: 1rem;
        }
        
        .reply-input {
            flex-grow: 1;
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 6px 12px;
            font-size: 0.85rem;
            resize: none;
            height: 32px;
        }
        
        .reply-input:focus {
            border-color: var(--primary);
            outline: none;
        }
        
        .submit-reply {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 16px;
            padding: 0 12px;
            font-size: 0.85rem;
            cursor: pointer;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .album-meta {
                gap: 1rem;
            }
            
            .album-actions {
                flex-wrap: wrap;
            }
            
            .action-btn {
                flex-grow: 1;
                justify-content: center;
            }
            
            .photos-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
            
            .form-group {
                flex-direction: column;
                gap: 0.75rem;
            }
            
            .submit-comment {
                align-self: flex-end;
            }
            
            .viewer-nav {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <a href="#" class="back-link">
                <i class="fas fa-arrow-left"></i> 返回相册列表
            </a>
        </div>
        
        <!-- 相册头部信息 -->
        <div class="album-header">
            <h1 class="album-title">夏日海岛旅行记</h1>
            
            <div class="album-meta">
                <div class="meta-item">
                    <i class="fas fa-images"></i>
                    <span>12 张照片</span>
                </div>
                <div class="meta-item">
                    <i class="far fa-calendar"></i>
                    <span>创建于 2023年7月15日</span>
                </div>
                <div class="meta-item">
                    <i class="far fa-eye"></i>
                    <span>1.2k 浏览</span>
                </div>
                <div class="meta-item">
                    <i class="far fa-heart"></i>
                    <span>245 点赞</span>
                </div>
                <div class="meta-item">
                    <i class="far fa-comment"></i>
                    <span>32 评论</span>
                </div>
                <div class="meta-item">
                    <i class="fas fa-tag"></i>
                    <span>旅行</span>
                </div>
            </div>
            
            <div class="album-description">
                记录在巴厘岛的美好时光，阳光、沙滩和海浪，还有当地的特色美食。这是我第一次去巴厘岛，那里的风土人情让我流连忘返。特别喜欢库塔海滩的日落和乌布的稻田风光，分享给大家！
            </div>
            
            <div class="album-author">
                <img src="https://picsum.photos/100/100?random=101" alt="李明的头像" class="author-avatar">
                <div class="author-info">
                    <div class="author-name">李明</div>
                    <div class="author-joined">加入于 2021年3月</div>
                </div>
                <button class="follow-btn">关注</button>
            </div>
            
            <div class="album-actions">
                <button class="action-btn primary-action like-btn">
                    <i class="far fa-heart"></i> 点赞
                </button>
                <button class="action-btn secondary-action save-btn">
                    <i class="far fa-bookmark"></i> 收藏
                </button>
                <button class="action-btn secondary-action share-btn">
                    <i class="fas fa-share-alt"></i> 分享
                </button>
                <button class="action-btn secondary-action more-btn">
                    <i class="fas fa-ellipsis-h"></i> 更多
                </button>
            </div>
        </div>
        
        <!-- 相册图片网格 -->
        <h2 class="section-title"><i class="fas fa-images"></i> 相册图片</h2>
        <div class="photos-grid" id="photosGrid">
            <!-- 图片1 -->
            <div class="photo-item" data-index="0">
                <img src="https://picsum.photos/600/600?random=1" alt="海滩日落">
                <div class="photo-caption">库塔海滩的绝美日落</div>
            </div>
            
            <!-- 图片2 -->
            <div class="photo-item" data-index="1">
                <img src="https://picsum.photos/600/600?random=2" alt="稻田风光">
                <div class="photo-caption">乌布的梯田风光</div>
            </div>
            
            <!-- 图片3 -->
            <div class="photo-item" data-index="2">
                <img src="https://picsum.photos/600/600?random=3" alt="当地美食">
                <div class="photo-caption">巴厘岛特色烤乳猪</div>
            </div>
            
            <!-- 图片4 -->
            <div class="photo-item" data-index="3">
                <img src="https://picsum.photos/600/600?random=4" alt="海神庙">
                <div class="photo-caption">塔纳洛特海神庙</div>
            </div>
            
            <!-- 图片5 -->
            <div class="photo-item" data-index="4">
                <img src="https://picsum.photos/600/600?random=5" alt="热带水果">
                <div class="photo-caption">当地市场的热带水果</div>
            </div>
            
            <!-- 图片6 -->
            <div class="photo-item" data-index="5">
                <img src="https://picsum.photos/600/600?random=6" alt="水上活动">
                <div class="photo-caption">水上摩托艇体验</div>
            </div>
            
            <!-- 图片7 -->
            <div class="photo-item" data-index="6">
                <img src="https://picsum.photos/600/600?random=7" alt="当地舞蹈">
                <div class="photo-caption">传统卡恰舞表演</div>
            </div>
            
            <!-- 图片8 -->
            <div class="photo-item" data-index="7">
                <img src="https://picsum.photos/600/600?random=8" alt="火山景观">
                <div class="photo-caption">巴杜尔火山远眺</div>
            </div>
            
            <!-- 图片9 -->
            <div class="photo-item" data-index="8">
                <img src="https://picsum.photos/600/600?random=9" alt="海滩剪影">
                <div class="photo-caption">海滩上的黄昏剪影</div>
            </div>
            
            <!-- 图片10 -->
            <div class="photo-item" data-index="9">
                <img src="https://picsum.photos/600/600?random=10" alt="SPA体验">
                <div class="photo-caption">传统巴厘岛SPA</div>
            </div>
            
            <!-- 图片11 -->
            <div class="photo-item" data-index="10">
                <img src="https://picsum.photos/600/600?random=11" alt="当地市场">
                <div class="photo-caption">乌布传统市场</div>
            </div>
            
            <!-- 图片12 -->
            <div class="photo-item" data-index="11">
                <img src="https://picsum.photos/600/600?random=12" alt="机场告别">
                <div class="photo-caption">离别前的机场日落</div>
            </div>
        </div>
        
        <!-- 评论区 -->
        <div class="comments-section">
            <h2 class="section-title"><i class="fas fa-comments"></i> 评论 (32)</h2>
            
            <!-- 评论表单 -->
            <div class="comment-form">
                <div class="form-group">
                    <img src="https://picsum.photos/100/100?random=201" alt="当前用户头像" class="user-avatar">
                    <textarea class="comment-input" placeholder="分享你的想法..."></textarea>
                    <button class="submit-comment">发布</button>
                </div>
            </div>
            
            <!-- 评论列表 -->
            <div class="comments-list">
                <!-- 评论1 -->
                <div class="comment-item">
                    <img src="https://picsum.photos/100/100?random=202" alt="张华的头像" class="user-avatar">
                    <div class="comment-content">
                        <div class="comment-header">
                            <div class="comment-author">张华</div>
                            <div class="comment-time">3天前</div>
                        </div>
                        <div class="comment-text">
                            巴厘岛一直是我想去的地方，照片拍得太美了！特别是日落那张，简直像画一样。请问你是住在库塔还是努沙杜瓦呢？
                        </div>
                        <div class="comment-actions">
                            <a href="#" class="comment-action like-comment">
                                <i class="far fa-heart"></i> 24
                            </a>
                            <a href="#" class="comment-action reply-btn">
                                <i class="far fa-comment"></i> 回复
                            </a>
                        </div>
                        
                        <!-- 回复列表 -->
                        <div class="replies-list">
                            <!-- 回复1 -->
                            <div class="reply-item">
                                <img src="https://picsum.photos/100/100?random=101" alt="李明的头像" class="reply-avatar">
                                <div class="comment-content">
                                    <div class="comment-header">
                                        <div class="comment-author">李明 <span style="color: var(--secondary); font-weight: normal;">回复 张华</span></div>
                                        <div class="comment-time">2天前</div>
                                    </div>
                                    <div class="comment-text">
                                        谢谢喜欢！我住在库塔，那边交通和餐饮都很方便，离海滩也近，晚上还能逛逛夜市。
                                    </div>
                                    <div class="comment-actions">
                                        <a href="#" class="comment-action like-comment">
                                            <i class="far fa-heart"></i> 8
                                        </a>
                                        <a href="#" class="comment-action reply-btn">
                                            <i class="far fa-comment"></i> 回复
                                        </a>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 回复表单 -->
                            <div class="reply-form" style="display: none;">
                                <img src="https://picsum.photos/100/100?random=201" alt="当前用户头像" class="reply-avatar">
                                <textarea class="reply-input" placeholder="回复 @张华..."></textarea>
                                <button class="submit-reply">回复</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 评论2 -->
                <div class="comment-item">
                    <img src="https://picsum.photos/100/100?random=203" alt="王芳的头像" class="user-avatar">
                    <div class="comment-content">
                        <div class="comment-header">
                            <div class="comment-author">王芳</div>
                            <div class="comment-time">1周前</div>
                        </div>
                        <div class="comment-text">
                            那个烤乳猪看起来太美味了！请问是在哪个餐厅吃的？下个月我也要去巴厘岛，求推荐美食餐厅！
                        </div>
                        <div class="comment-actions">
                            <a href="#" class="comment-action like-comment">
                                <i class="far fa-heart"></i> 15
                            </a>
                            <a href="#" class="comment-action reply-btn">
                                <i class="far fa-comment"></i> 回复
                            </a>
                        </div>
                        
                        <!-- 回复列表 -->
                        <div class="replies-list">
                            <!-- 回复表单 -->
                            <div class="reply-form" style="display: none;">
                                <img src="https://picsum.photos/100/100?random=201" alt="当前用户头像" class="reply-avatar">
                                <textarea class="reply-input" placeholder="回复 @王芳..."></textarea>
                                <button class="submit-reply">回复</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 评论3 -->
                <div class="comment-item">
                    <img src="https://picsum.photos/100/100?random=204" alt="赵阳的头像" class="user-avatar">
                    <div class="comment-content">
                        <div class="comment-header">
                            <div class="comment-author">赵阳</div>
                            <div class="comment-time">2周前</div>
                        </div>
                        <div class="comment-text">
                            摄影技术真好！请问用的是什么相机和镜头？我也喜欢旅行摄影，希望能交流一下经验。
                        </div>
                        <div class="comment-actions">
                            <a href="#" class="comment-action like-comment">
                                <i class="far fa-heart"></i> 32
                            </a>
                            <a href="#" class="comment-action reply-btn">
                                <i class="far fa-comment"></i> 回复
                            </a>
                        </div>
                        
                        <!-- 回复列表 -->
                        <div class="replies-list">
                            <!-- 回复1 -->
                            <div class="reply-item">
                                <img src="https://picsum.photos/100/100?random=101" alt="李明的头像" class="reply-avatar">
                                <div class="comment-content">
                                    <div class="comment-header">
                                        <div class="comment-author">李明 <span style="color: var(--secondary); font-weight: normal;">回复 赵阳</span></div>
                                        <div class="comment-time">2周前</div>
                                    </div>
                                    <div class="comment-text">
                                        谢谢夸奖！我用的是索尼A7M3，镜头主要是16-35mm F4和70-200mm F4，轻便适合旅行携带。
                                    </div>
                                    <div class="comment-actions">
                                        <a href="#" class="comment-action like-comment">
                                            <i class="far fa-heart"></i> 12
                                        </a>
                                        <a href="#" class="comment-action reply-btn">
                                            <i class="far fa-comment"></i> 回复
                                        </a>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 回复2 -->
                            <div class="reply-item">
                                <img src="https://picsum.photos/100/100?random=205" alt="陈艺的头像" class="reply-avatar">
                                <div class="comment-content">
                                    <div class="comment-header">
                                        <div class="comment-author">陈艺 <span style="color: var(--secondary); font-weight: normal;">回复 赵阳</span></div>
                                        <div class="comment-time">1周前</div>
                                    </div>
                                    <div class="comment-text">
                                        我也喜欢旅行摄影，最近刚入手了富士XT4，轻便画质又好，推荐你试试！
                                    </div>
                                    <div class="comment-actions">
                                        <a href="#" class="comment-action like-comment">
                                            <i class="far fa-heart"></i> 5
                                        </a>
                                        <a href="#" class="comment-action reply-btn">
                                            <i class="far fa-comment"></i> 回复
                                        </a>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 回复表单 -->
                            <div class="reply-form" style="display: none;">
                                <img src="https://picsum.photos/100/100?random=201" alt="当前用户头像" class="reply-avatar">
                                <textarea class="reply-input" placeholder="回复 @赵阳..."></textarea>
                                <button class="submit-reply">回复</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 加载更多评论 -->
            <button class="load-more" id="loadMoreComments">加载更多评论</button>
        </div>
    </div>
    
    <!-- 全屏图片查看器 -->
    <div class="fullscreen-viewer" id="fullscreenViewer">
        <div class="viewer-content">
            <img src="" alt="全屏查看的图片" class="fullscreen-image" id="fullscreenImage">
            <div class="viewer-caption" id="fullscreenCaption"></div>
            <button class="viewer-close" id="viewerClose">
                <i class="fas fa-times"></i>
            </button>
            <div class="viewer-nav">
                <button class="viewer-btn" id="prevImage">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="viewer-btn" id="nextImage">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 存储所有图片信息
        const photos = [
            { src: "https://picsum.photos/600/600?random=1", caption: "库塔海滩的绝美日落" },
            { src: "https://picsum.photos/600/600?random=2", caption: "乌布的梯田风光" },
            { src: "https://picsum.photos/600/600?random=3", caption: "巴厘岛特色烤乳猪" },
            { src: "https://picsum.photos/600/600?random=4", caption: "塔纳洛特海神庙" },
            { src: "https://picsum.photos/600/600?random=5", caption: "当地市场的热带水果" },
            { src: "https://picsum.photos/600/600?random=6", caption: "水上摩托艇体验" },
            { src: "https://picsum.photos/600/600?random=7", caption: "传统卡恰舞表演" },
            { src: "https://picsum.photos/600/600?random=8", caption: "巴杜尔火山远眺" },
            { src: "https://picsum.photos/600/600?random=9", caption: "海滩上的黄昏剪影" },
            { src: "https://picsum.photos/600/600?random=10", caption: "传统巴厘岛SPA" },
            { src: "https://picsum.photos/600/600?random=11", caption: "乌布传统市场" },
            { src: "https://picsum.photos/600/600?random=12", caption: "离别前的机场日落" }
        ];
        
        let currentImageIndex = 0;
        
        // DOM元素
        const photosGrid = document.getElementById('photosGrid');
        const fullscreenViewer = document.getElementById('fullscreenViewer');
        const fullscreenImage = document.getElementById('fullscreenImage');
        const fullscreenCaption = document.getElementById('fullscreenCaption');
        const viewerClose = document.getElementById('viewerClose');
        const prevImageBtn = document.getElementById('prevImage');
        const nextImageBtn = document.getElementById('nextImage');
        const likeBtn = document.querySelector('.like-btn');
        const saveBtn = document.querySelector('.save-btn');
        const followBtn = document.querySelector('.follow-btn');
        const replyBtns = document.querySelectorAll('.reply-btn');
        const likeComments = document.querySelectorAll('.like-comment');
        const loadMoreCommentsBtn = document.getElementById('loadMoreComments');
        
        // 打开全屏查看器
        function openFullscreenViewer(index) {
            currentImageIndex = index;
            const photo = photos[index];
            fullscreenImage.src = photo.src;
            fullscreenCaption.textContent = photo.caption;
            fullscreenViewer.classList.add('active');
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }
        
        // 关闭全屏查看器
        function closeFullscreenViewer() {
            fullscreenViewer.classList.remove('active');
            document.body.style.overflow = ''; // 恢复背景滚动
        }
        
        // 查看上一张图片
        function showPrevImage() {
            currentImageIndex = (currentImageIndex - 1 + photos.length) % photos.length;
            const photo = photos[currentImageIndex];
            fullscreenImage.src = photo.src;
            fullscreenCaption.textContent = photo.caption;
        }
        
        // 查看下一张图片
        function showNextImage() {
            currentImageIndex = (currentImageIndex + 1) % photos.length;
            const photo = photos[currentImageIndex];
            fullscreenImage.src = photo.src;
            fullscreenCaption.textContent = photo.caption;
        }
        
        // 图片点击事件
        document.querySelectorAll('.photo-item').forEach(item => {
            item.addEventListener('click', function() {
                const index = parseInt(this.dataset.index);
                openFullscreenViewer(index);
            });
        });
        
        // 关闭按钮事件
        viewerClose.addEventListener('click', closeFullscreenViewer);
        
        // 上一张/下一张按钮事件
        prevImageBtn.addEventListener('click', showPrevImage);
        nextImageBtn.addEventListener('click', showNextImage);
        
        // 键盘导航
        document.addEventListener('keydown', function(e) {
            if (!fullscreenViewer.classList.contains('active')) return;
            
            if (e.key === 'Escape') {
                closeFullscreenViewer();
            } else if (e.key === 'ArrowLeft') {
                showPrevImage();
            } else if (e.key === 'ArrowRight') {
                showNextImage();
            }
        });
        
        // 点击空白处关闭
        fullscreenViewer.addEventListener('click', function(e) {
            if (e.target === fullscreenViewer) {
                closeFullscreenViewer();
            }
        });
        
        // 点赞功能
        likeBtn.addEventListener('click', function() {
            const icon = this.querySelector('i');
            if (icon.classList.contains('far')) {
                // 点赞
                icon.classList.remove('far');
                icon.classList.add('fas', 'text-primary');
                this.classList.add('liked');
                // 这里可以添加更新点赞数的逻辑
            } else {
                // 取消点赞
                icon.classList.remove('fas', 'text-primary');
                icon.classList.add('far');
                this.classList.remove('liked');
                // 这里可以添加更新点赞数的逻辑
            }
        });
        
        // 收藏功能
        saveBtn.addEventListener('click', function() {
            const icon = this.querySelector('i');
            if (icon.classList.contains('far')) {
                // 收藏
                icon.classList.remove('far');
                icon.classList.add('fas', 'text-danger');
                this.classList.add('saved');
            } else {
                // 取消收藏
                icon.classList.remove('fas', 'text-danger');
                icon.classList.add('far');
                this.classList.remove('saved');
            }
        });
        
        // 关注功能
        followBtn.addEventListener('click', function() {
            if (this.classList.contains('following')) {
                // 取消关注
                this.classList.remove('following');
                this.textContent = '关注';
            } else {
                // 关注
                this.classList.add('following');
                this.textContent = '已关注';
            }
        });
        
        // 回复功能
        replyBtns.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                // 找到对应的回复表单
                const commentItem = this.closest('.comment-item, .reply-item');
                const repliesList = commentItem.querySelector('.replies-list');
                const replyForm = repliesList.querySelector('.reply-form');
                
                // 切换回复表单显示状态
                if (replyForm.style.display === 'none' || replyForm.style.display === '') {
                    replyForm.style.display = 'flex';
                    replyForm.querySelector('.reply-input').focus();
                } else {
                    replyForm.style.display = 'none';
                }
            });
        });
        
        // 评论点赞功能
        likeComments.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const icon = this.querySelector('i');
                if (icon.classList.contains('far')) {
                    // 点赞
                    icon.classList.remove('far');
                    icon.classList.add('fas', 'text-primary');
                    this.classList.add('liked');
                    // 更新点赞数
                    let countText = this.textContent.trim();
                    let count = parseInt(countText.split(' ').pop());
                    this.innerHTML = `<i class="fas fa-heart"></i> ${count + 1}`;
                } else {
                    // 取消点赞
                    icon.classList.remove('fas', 'text-primary');
                    icon.classList.add('far');
                    this.classList.remove('liked');
                    // 更新点赞数
                    let countText = this.textContent.trim();
                    let count = parseInt(countText.split(' ').pop());
                    this.innerHTML = `<i class="far fa-heart"></i> ${count - 1}`;
                }
            });
        });
        
        // 发布评论
        document.querySelector('.submit-comment').addEventListener('click', function() {
            const input = document.querySelector('.comment-input');
            const text = input.value.trim();
            
            if (text) {
                // 这里可以添加发布评论的逻辑
                alert('评论发布成功！');
                input.value = '';
            }
        });
        
        // 发布回复
        document.querySelectorAll('.submit-reply').forEach(btn => {
            btn.addEventListener('click', function() {
                const input = this.parentElement.querySelector('.reply-input');
                const text = input.value.trim();
                
                if (text) {
                    // 这里可以添加发布回复的逻辑
                    alert('回复发布成功！');
                    input.value = '';
                    this.parentElement.style.display = 'none';
                }
            });
        });
        
        // 加载更多评论
        loadMoreCommentsBtn.addEventListener('click', function() {
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            setTimeout(() => {
                // 模拟加载更多评论
                this.innerHTML = '没有更多评论了';
                this.disabled = true;
                this.style.opacity = '0.7';
            }, 1500);
        });
    </script>
</body>
</html>

